<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../Vue-Lib/dist/vue.js"></script>
    <style>
        .contentBg{
            background-color: antiquewhite;
            display: inline;
        }
    </style>
</head>


<body>
<p>
    Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析.
    <br>
    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
    <br>
    vue需要先实例化vue对象
    new Vue({
    });
</p>

<div id="app1">
    <h2>插值</h2>
    <h4>1.文本</h4>
    <p class="contentBg">
        数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。 <stong>v-once:</stong>执行一次性插值
    </p>
    <p>{{message}}</p>


    <h4>2.原始HTML</h4>
    <p class="contentBg">
        双大括号只会将数据解释为普通文本,而不是HTML,如果要输出真正html,使用<strong>v-html</strong>
    </p>
    <p v-html="rawHtml"></p>


    <h4>3.特性</h4>
    <p class="contentBg">
        Mustache语法不能用在html的属性上,如果使用属性,vue提供了v-bind指令
    </p>
    <p >
        <button v-bind:disabled="!isButtonDisabled">显示</button> <p>我是按钮1,我被显示</p>
        <button v-bind:disabled="isButtonDisabled">隐藏</button> <p>我是按钮2,我被隐藏了</p>
    </p>

    <h4>4.JS表达式</h4>
    <p class="contentBg">
        对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
    </p>


    <h2>指令</h2>
    <p>一些指令能够接收一个“参数”，在指令名称之后以冒号表示。</p>


    <h2>缩写</h2>
    <p>
        <strong>v-bind:</strong> 缩写为 <strong>:</strong>
        <br>
        如v-bind:href="http://www/baidu.com"   ->   :href="http://www/baidu.com"
        <br>
        <strong>v-on:</strong> 缩写为 <strong>@</strong>
        <br>
        如v-on:click="doSomething"   ->  @click="doSomething"
    </p>


</div>




<script>
    var vm = new Vue({
        el:'#app1',
        data:{
            message: 'hello vue',
            rawHtml: '<span style="color: red;">测试v-html</span>',
            isButtonDisabled: true
        }

    });
</script>

</body>

</html>